<template>
 <div class="display-board-container">
   <!--标题栏容器-->
   <div class="title-container">
    <!--左侧图标文字容器-->
    <div class="icon-title-pot">
      <!--字体图标-->
      <img class="flowmeter-icon" :src='propsData.iconUrl'>
      <!--标题文字-->
      <span class="title">{{propsData.titleName}}</span>
    </div>
    <!--右侧钻石图片-->
    <img class="diamond-image" src="../../../assets/images/display_board/diamond_image.png">
   </div>
   <!--横线-->
   <img class="horizontal-line" src="../../../assets/images/display_board/horizontal_line_image.png">
   <!--图表容器-->
   <div class="diagram-container">
     <!-- 定义一个插槽，内容在父组件中的该组件标签里填充 -->
     <slot></slot>

   </div>
 </div>
</template>

<script setup name="DisplayBoard">
  let propsData = defineProps({
    iconUrl: {
      type:String,
    },
    titleName: {
      type:String,
    },
  })
</script>

<style scoped lang="scss">
  .display-board-container{
    width: 100%;
    height: 100%;
    //border: 1px red solid;

    //标题外容器
    .title-container{
      width: 100%;
      height: 40px;  //设置标题栏高度
      //background-color: red;
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px; //设置与下方横线间距

      //标题内容器样式
      .icon-title-pot{
        height: 100%;
        display: flex;
        align-items: center;

        // 标题字体图标样式
        .flowmeter-icon{
          height: 100%;
          margin-right: 10px;
        }

        // 标题文本样式
        .title{
          font-size: 24px;
          font-weight: 500;
          letter-spacing: 3px;
          background:linear-gradient(to bottom,#FFFFFF 35%,#2DD2F6 65%); //此处渐变尚有疑问
          -webkit-background-clip:text;
          color:transparent;
        }
      }

      // 钻石图片样式
      .diamond-image{
        height: 100%;
      }
    }

    //横线样式
    .horizontal-line{
      width: 100%;
      height: 2px;
      margin-bottom: 10px;
    }
    // 图表容器样式
    .diagram-container{
      width: 100%;
      //总高 - 标题栏高度 - 标题栏下外边距 - 横线高 - 横线下外边距 -
      height: calc(100% - 40px - 5px - 2px - 10px - 8px);
      //background-color: pink;
      background-image: url("../../../assets/images/display_board/diagram_back_image.png");
      //background-repeat: no-repeat;
      background-size: 100% 100%;
      //background-position:center;
    }
  }
</style>